<template>
  <div class="main_global_bg">
    <div class="container">
      <div class="ask_content" id="newQuestion">
        <div class="row">
          <div class="col-md-12">
            <div class="breadcrumb red_breadcrumb">
              <nuxt-link :to="{ name: 'interview-tag-sort' }" class="section">
                开源实践面试
              </nuxt-link>
              <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span>
              <h1 class="askactive section">创建面试题</h1>
            </div>
            <form class="ui new-question form">
              <div class="field">
                <label>面试岗位</label>
                <input type="hidden" name="catalog" value="1" />
                <div class="module-body">
                  <div class="mock-jobs-list">
                    <div href="/interview/ai/cover?jobTagId=639" class="mock-jobs-item"
                      v-bind:class="{ active: selectPosition == item.id }" v-for="item in positionList" :key="item.id"
                      @click="professionClick(item)">
                      <div class="mock-jobs-info active">
                        <p class="mock-jobs-name">{{ item.name }}</p>
                        <p class="item-mock-tips">115944人已参加</p>
                      </div>
                      <img class="mock-jobs-img" :src="item.img" alt="图标">
                    </div>
                  </div>
                </div>
              </div>
              <div class="required field">
                <label>面试题目</label>
                <div class="interview-input">
                  <el-input v-model="asktitle" placeholder="请在此输入面试题目" v-on:focus="inputfocuse"></el-input>
                </div>
              </div>
              <div class="field">
                <label>面试题分类</label>
                <div class="interview-input">
                  <el-select v-model="sId" clearable placeholder="请选择">
                    <el-option v-for="classify in classifyList" :key="classify.id" :label="classify.name"
                      :value="classify.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="required field mb20">
                <label>面试题标签</label>
                <div class="search_input">
                  <el-select multiple filterable :multiple-limit="3" v-model="selectTags" popper-class="pop-class"
                    no-data-text="当前没有标签" :loading="tagLoading" placeholder="准确的关联语言,平台，或者开源程序，可以获得更专业的解答 (最多3个)"
                    @focus="searchTagFocus" style="width:600px;">
                    <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>

                  <span class="tips_tag" @click="slectTagClick">
                    <span class="span_add" style="color: rgb(39, 124, 204);">
                      <i class="icon icon_add icon_add_pos"></i>
                    </span> 没有合适的标签，添加新标签？</span>
                </div>
              </div>

              <div class="field input-descrip">
                <label>
                  描述（请对面试问题进行详细描述：如问题补充说明、前置条件、提示信息等）
                </label>
                <div id="askQustion_content">
                </div>
              </div>
              <div class="publish_ask">
                <div class="interview-tips">
                  <el-checkbox v-model="checked" @change="confirmSelected">我确认提交的内容符合法律法规，若违反允许依法删除违规内容</el-checkbox>
                </div>
                <el-button type="primary" @click="publishAsk">提交面试题</el-button>
                <p class="tips_error_show" v-show="this.errtips.length > 0">
                  {{ errtips }}
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const qiniu = require('qiniu-js')

export default {
  data () {
    return {
      tipsme: false,
      nocomment: false,
      askcontent: '',
      asktitle: '',
      asktag: '',
      errtips: '',
      askType: 0,
      loginToken: '',
      uploadToken: '',
      tagsVisible: false,
      selectTags: [],
      tagList: [],
      classifyList:[],
      groupTagList: [],
      checked: false,
      tagLoading: true,

      sId:"",   // 面试题分类
    }
  },

  async asyncData ({ params, error ,app}) {
    const response = await app.$axios.$get('/home/interview/positionList');
    return {
        positionList: response.data.positionList,
        selectPosition: response.data.positionList[0].id,
      }
  },

  head () {
    return {
      title: "创建面试题 - 开源实践面试",
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: "开源实践网,开源实践面试,创建面试题，面试问题",
        },
        {
          hid: 'description',
          name: 'description',
          content: "开源实践面试题创建页面",
        },
        {
          hid: 'og:description',
          content: "开源实践面试题创建页面",
        },
      ],
    }
  },

  mounted () {
    this.loginToken = "       " + this.$auth.$storage._state['_token.local'];
    this.init_wangeditor();
    this.getUploadImageToken();
  },

  methods: {
    professionClick (item) {
      this.selectPosition = item.id;
      this.$axios.$get('/interview/admin/positionClassifyList/'+this.selectPosition).then((response) => {
          this.classifyList = response.data.positionClassifyList;
        });
      this.tagLoading = true;
    },
    groupTagClick (tag) {
      var index = this.selectTags.indexOf(tag.id);
      if (index == -1) {
        if (this.selectTags.length >= 3) {
          this.$message({
            type: 'error',
            message: '标签最多只能有3个哈！',
          });
          return;
        }
        this.selectTags.push(tag.id);
      } else {
        this.selectTags.splice(index, 1)
      }
    },
    searchTagFocus () {
      if(this.errtips == '至少需要选择一个标签哈！') {
        this.errtips = '';
      }
      if (this.tagLoading) {
        this.$axios.$get('/tags/getTagList').then((response) => {
          this.tagList = response.data.tagList;
          this.tagLoading = false;
        });
      }
    },
    confirmSelected() {
      if(this.checked && this.errtips == '请确认您提交的内容哈！') {
        this.errtips = '';
      }
    },

    slectTagClick () {
        this.$message({
              type: 'info',
              message: '功能正在紧急开发中，敬请期待',
            })
    },

    handleTagClick (tab, event) {
      this.selectType = tab.name;
      this.$axios.$get('/tags/getTagList').then((response) => {
        this.groupTagList = response.data.tagList;
      });
    },
    getUploadImageToken () {
      this.$axios.$post('/eduask/uploadqiniutoken').then((response) => {
        this.uploadToken = response.data.token;
      });
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!(isJPG || isPng)) {
        this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
    
    publishAsk () {
      if (this.asktitle.length < 6) {
        this.errtips = '标题必须六个字符以上哈！'
        return
      }
      if(this.selectTags.length<=0) {
        this.errtips = '至少需要选择一个标签哈！'
        return
      }
      if(!this.checked) {
        this.errtips  = "请确认您提交的内容哈！";
        return
      }
    
      if (this.$auth.loggedIn) {
        var userInfo =  JSON.parse(JSON.stringify(this.$auth.user));
        this.$axios.$post('/interview/submit',{
            uid: userInfo.id,
            title: this.asktitle,
            content: this.askcontent,
            position: this.selectPosition,
            classify:this.sId,
            tagList: this.selectTags
          }).then((response) => {
            this.$message({
              type: 'success',
              message: '问题提交成功！',
            });
            this.$router.push({name: "interview-tag-sort",query: {}});
          })
      } else {
        this.$router.push({
          name: 'login',
          query: {},
        })
      }
    },
    inputfocuse () {
      if(this.errtips == '标题必须六个字符以上哈！') {
        this.errtips = ''
      }
    },

    init_wangeditor () {
      window.myVueComm = this;
      let editor = this.$wangeditor('#askQustion_content')
      editor.config.uploadImgMaxLength = 1
      editor.config.uploadImgServer = '/api/ucenter/uploadImage'
      editor.config.uploadFileName = 'file'
      editor.config.placeholder = '请输入面试题详细信息'
      editor.config.zIndex = 100;
      editor.config.uploadImgHeaders = {
        Authorization: this.loginToken
      }
      editor.config.customUploadImg = function (files, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        var file = files[0];
        const putExtra = {
          mimeType: file.type,
        };
        const config = {
          region: qiniu.region.z2
        };
        const observable = qiniu.upload(file, null, window.myVueComm.uploadToken, putExtra, config);
        const observer = {
          next (res) {
            window.console.log(res);
          },
          error (err) {
            window.console.log(err);
          },
          complete (res) {
            window.console.log(res);
            insertImgFn('https://img.redskt.com/' + res.hash);
          }
        }
        const subscription = observable.subscribe(observer)
      }
      editor.config.onchange = function (newHtml) {
        window.myVueComm.askcontent = newHtml;
      };
      editor.create()
    },
  },
}
</script>

<style>
.search_input .el-select .el-tag__close.el-icon-close {
  background-color: #ecf5ff;
}

.search_input .el-tag.el-tag--info .el-tag__close:hover {
  background-color: #409eff;
}

.search_input .el-tag.el-tag--info {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  display: inline-block;
  font-size: 12px;
  color: #409eff;
}
</style>>

<style scoped>

.ui.form .field.input-descrip {
  margin-right: 20px;
}
.interview-tips {
  margin-top: 15px;
  margin-bottom: 15px;
}

.required.field.input-descrip {
  padding-right: 20px;
}

.module-body {
  padding: 15px 0px;
  margin-left: -20px;
}

.mock-jobs-list {
  display: flex;
  flex-wrap: wrap;
}

.mock-jobs-list .mock-jobs-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 253px;
  padding: 14px 20px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 8%);
  border-radius: 4px;
  margin-bottom: 14px;
  margin-left: 23px;
  border: 2px solid #ffff;
}

.mock-jobs-list .mock-jobs-item.active {
  border: 2px solid #409eff;
}

.mock-jobs-item .mock-jobs-info .mock-jobs-name {
  font-size: 14px;
  font-weight: 500;
}

.mock-jobs-item .mock-jobs-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mock-jobs-item .mock-jobs-img {
  width: 58px;
  height: 58px;
}

.mock-jobs-item:hover {
  margin-top: -4px;
  height: 86px;
  text-decoration: none;
  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 16%);
}

.group-taglist .nodata-image-tips {
  width: 150px;
  height: 150px;
}

.group-taglist .tag-list {
  margin-right: 12px;
  margin-bottom: 10px;
}

.group-taglist {
  margin-top: 6px;
}

.tips_tag {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #507999;
  line-height: 24px;
  cursor: pointer;
  margin-left: 12px;
}

.icon_add_pos {
  margin-left: 0;
  position: relative;
  top: -1px;
}

.icon_add {
  width: 12px;
  height: 12px;
  background-image: url();
  cursor: pointer;
}

.span_add {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #ebf2f7;
  border-radius: 2px;
  cursor: pointer;
}

.askactive {
  font-weight: 500;
  /* color: #409eff !important; */
}

.checkbox {
  margin-left: -15px;
}

.ask_content {
  background: #fff;
  padding-top: 15px;
  padding-left: 25px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.publish_ask {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ui.form .field {
  clear: both;
  margin: 0 0 10px;
}

.ui.form .field>label {
  display: block;
  margin: 0 0 0.28571429rem 0;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 10px;
}

.ui.item.menu,
.ui.item.menu .item {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.ui.menu:last-child {
  margin-bottom: 0;
}

.ui.menu {
  font-size: 1rem;
}

.ui.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1rem 0;
  font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI',
    'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, Arial, Helvetica,
    sans-serif;
  background: #fff;
  font-weight: 400;
  border: 1px solid rgba(34, 36, 38, 0.15);
  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  border-radius: 0.14285714rem;
  min-height: 2.85714286em;
}

.ui.menu.five.item .item {
  width: 20%;
  padding-top: 6px;
  padding-bottom: 6px;
  border-right: 1px solid rgba(34, 36, 38, 0.15);
}

.ui.menu.five.item a {
  display: block;
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
}

.ui.menu.five.item a span {
  font-weight: 600;
}

.ui.form .required.field>label:after {
  display: inline-block;
  vertical-align: top;
}

.required.field>label:after {
  margin: -0.2em 0 0 0.2em;
  content: '*';
  color: #db2828;
}

.interview-input {
  padding-right: 20px;
}

.ui.form input {
  font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI',
    'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, Arial, Helvetica,
    sans-serif;
  margin: 0;
  outline: 0;
  width: 100%;
  -webkit-appearance: none;
  line-height: 1.21428571em;
  padding: 0.67857143em 1em;
  font-size: 1em;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.14285714rem;
  -webkit-box-shadow: 0 0 0 0 transparent inset;
  box-shadow: 0 0 0 0 transparent inset;
  -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  transition: color 0.1s ease, border-color 0.1s ease;
}

.search_input {
  position: relative;
}

.qustion_tag_search {
  margin-top: 10px;
}

.placeholder_text {
  position: absolute;
  top: 6px;
  left: 10px;
}

.ui.warning.message {
  -webkit-box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent;
  box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent;
}

.ui.warning.message {
  background-color: #fffaf3;
  color: #573a08;
  width: 280px;
}

.ui.message {
  position: relative;
  min-height: 1em;
  margin: 1em 0;
  background: #f8f8f9;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  color: rgba(0, 0, 0, 0.87);
  -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    -webkit-box-shadow 0.1s ease;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    -webkit-box-shadow 0.1s ease;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  border-radius: 0.14285714rem;
  -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset,
    0 0 0 0 transparent;
  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 transparent;
}

.ui.warning.message .header {
  color: #794b02;
  margin-top: 16px;
  margin-bottom: 10px;
}

.ui.message .list:not(.ui) li:before {
  position: absolute;
  content: '•';
  left: 16px;
  height: 100%;
  vertical-align: baseline;
}

.ui.message .list {
  margin-left: 16px;
  padding: 0px;
  font-size: 14px;
}

.ui.message .list li {
  padding-top: 5px;
  margin-left: 5px;
  margin-bottom: 8px;
  line-height: 16px;
}

.tips_error_show {
  position: absolute;
    top: 43px;
    left: 130px;
    color: red;
    font-size: 12px;
    width: 100%;
}

.editor {
  line-height: normal !important;
  height: 500px;
}
</style>
